<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import useHospitalStore from "@/pinia/hospitalStore.ts";
import Menu from '@/views/hospital/components/menu/menu.vue'

const route = useRoute()
const hospitalStore = useHospitalStore()

const loading = ref<boolean>(false)
const fetchHospitalDetail = async () => {
  try {
    loading.value = true
    await hospitalStore.fetchHospitalDetail(route.query.hoscode as string)
  } catch (error) {
    ElMessage.warning(error.message)
  } finally {
    loading.value = false
  }
}
const fetchHospitalDeparment = async () => {
  try {
    await hospitalStore.fetchHospitalDeparment(route.query.hoscode as string)
  } catch (error) {
    ElMessage.warning(error.message)
  }
}
onMounted(() => {
  fetchHospitalDetail()
  fetchHospitalDeparment()
})
</script>

<template>
  <div class="hospital">
    <div class="menu">
      <Menu></Menu>
    </div>
    <div class="content" v-loading="loading" element-loading-background="rgb(255, 255, 255)">
        <RouterView></RouterView>
    </div>
  </div>
</template>

<style scoped lang="scss">
.hospital {
  display: flex;
  padding: 10px 20px;
  background-color: #ffffff;


  .content {
    flex: 8;
    min-height: 1200px;
  }

  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.5s ease;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }
}
</style>
